<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--<div class="s4-main" id="mainList"></div>-->
<div class="main-text clearfix" id="mainList2"></div>


<!--<script>-->
    <!--function getMainInfo() {-->
<!--//        alert(1234);-->
        <!--let xhr = new XMLHttpRequest();-->
        <!--xhr.open('get', 'https://a754dbc5-46e9-4432-8701-6a0f0ed500c3.mock.pstmn.io/getmainlist')-->
        <!--xhr.send(null)-->
        <!--xhr.onreadystatechange = function () {-->
            <!--if (xhr.readyState == 4 && xhr.status == 200) {-->
                <!--let mainList = JSON.parse(xhr.responseText)-->
                <!--for (let main of mainList) {-->
                    <!--var node = document.createElement("li")-->
                    <!--if (main.id % 2) {-->
                        <!--node.innerHTML += `-->
                        <!--<div class="s4-m-item s4-m-item1 clearfix" id="${main.id}">-->
                            <!--<div class="s4-i-left clearfix">-->
                                 <!--<a href="#"></a>-->
                            <!--</div>-->
                            <!--<div class="s4-i-right clearfix">-->
                                <!--<h3><a href="" >${main.title}</a></h3>-->
                                <!--<p ><a href="" >${main.content}</a></p>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--`;-->
                    <!--} else {-->
                        <!--node.innerHTML += `-->
                         <!--<div class="s4-m-item s4-m-item2 clearfix" id="${main.id}">-->
                             <!--<div class="s4-i-left clearfix">-->
                                     <!--<h3 ><a href="#">${main.title}</a></h3>-->
                                      <!--<p ><a href="#">${main.content}</a></p>-->
                          <!--</div>-->
                          <!--<div class="s4-i-right clearfix">-->
                            <!--<a href="#"></a>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--`;-->
                    <!--}-->
                    <!--document.querySelector('#mainList').appendChild(node)-->
                <!--}-->
            <!--}-->
        <!--}-->
    <!--}-->
    <!--getMainInfo();-->
<!--</script>-->
<script>
    function getMain2Info() {
        alert(1234567890)
        let xhr = new XMLHttpRequest();
        xhr.open('get', 'https://a754dbc5-46e9-4432-8701-6a0f0ed500c3.mock.pstmn.io/getmali2')
        xhr.send(null)
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let mainList2 = JSON.parse(xhr.responseText)
                for (let main2 of mainList2) {
                    var node = document.createElement("li")
                    if (main2.id % 2) {
                        node.innerHTML += `
                        <div class="ui2-ico m-t-item" >
    <a href="#">
        <span class="m-t-ico"></span>
        <div class="m-t-wrap">
            <div class="m-t-text" id="${main2.id}">
                <h2>${main2.title}</h2>
                <p>${main2.content1}</p>
                <p>${main2.content2}</p>
            </div>
            <span class="m-t-btn">查看更多</span>
        </div>
    </a>
</div>
                        `;
                    } else {
                    node.innerHTML += `
                         <div class="move-ico m-t-item">
    <a href="#">
        <span class="m-t-ico"></span>
        <div class="m-t-wrap">
            <div class="m-t-text"  id="${main2.id}">
               <h2>${main2.title}</h2>
                <p> ${main2.content1}</p>
                <p> ${main2.content2}</p>
            </div>
            <span class="m-t-btn">查看更多</span>
        </div>
    </a>
</div>
                        `;
                    }
                    document.querySelector('#mainList2').appendChild(node)
                }
            }
        }
    }
    getMain2Info();
</script>
</body>
</html>